<template>
  <div class="my-pending">
    <div class="top">
      <div class="left">
        <img src="~@/assets/dashboard/comp_icon_2.png" alt="" width="24" height="24" />
        <span>我的待办</span>
        <div class="my-badge">99+</div>
      </div>
      <div class="right" @click="toMyPending">
        <span>全部待办</span>
        <img src="~@/assets/dashboard/right-arrow.png" alt="" width="7" height="11" />
      </div>
    </div>
    <div class="content-box">
      <div class="content">
        <div class="toptabs">
          <div class="tab" :class="{active:activeType==='0'}" @click="changeType('0')">全部</div>
          <div class="tab" :class="{active:activeType==='1'}" @click="changeType('1')">公文</div>
          <div class="tab" :class="{active:activeType==='2'}" @click="changeType('2')">资产</div>
          <div class="tab" :class="{active:activeType==='3'}" @click="changeType('3')">日程</div>
        </div>
        <template v-if="listData.length>0">
          <div class="result-list">
            <div
              class="result-row"
              v-for="(item,index) in listData"
              :key="index"
              @click="toPending(item)"
            >
              <div class="p_title">
                <div class="p_type" :class="'p_type_'+item.type" v-if="item.type==='1'">公文</div>
                <div class="p_type" :class="'p_type_'+item.type" v-if="item.type==='2'">资产</div>
                <div class="p_type" :class="'p_type_'+item.type" v-if="item.type==='3'">日程</div>
                <span>{{ item.title }}</span>
              </div>
              <div class="p_content">{{ item.content }}</div>
              <div class="p_time">{{ item.createTime || '未知' }}</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="result-empty">
            <img src="~@/assets/dashboard/empty-pending.png" alt="" width="90" height="90" />
            <div class="empty-text">您已完成全部待办</div>
            <el-button class="empty-link" type="primary">进入我的待办</el-button>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  components: {
  },
  name: "",
  props: {
  },
  data() {
    return {
      activeType: '0',
      listData: [
        {
          type: '1',
          title: '盛辉【2023】配送52号',
          content: '哈哈哈哈哈哈哈',
          createTime: '2023-12-21 09:15:30',
        },
        {
          type: '2',
          title: '固定资产申购审核',
          content: '哈哈哈哈哈哈哈',
          createTime: '2023-12-21 09:15:30',
        },
        {
          type: '3',
          title: '日程提醒',
          content: '哈哈哈哈哈哈哈',
          createTime: '2023-12-21 09:15:30',
        },

        {
          type: '1',
          title: '盛辉办【2023】办61号',
          content: '哈哈哈哈哈哈哈',
          createTime: '2023-12-21 09:15:30',
        },
      ],
    }
  },
  computed: {
  },
  mounted() {

  },
  methods: {
    //切换查询类型
    changeType(type) {
      this.activeType = type || '0'
    },
    //跳转我的待办
    toPending(row) {
      console.log(row)
      window.$addTab('我的待办')
    },
    toMyPending(){
      window.$addTab('我的待办')
    },
  },
  watch: {
    // "reqLoading.state"(v) {
    //   console.log(v, 45111111);
    // },
  },
};
</script>
<style lang="less" scoped>
@textColor: #1f1e1d;
@ntalkColor: #e67529;
.my-pending {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 8px;
  min-height: 370px;
  backdrop-filter: blur(10px); //内核兼容性问题
  //background-color: #f2f3f6;
  .top {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      span {
        margin-left: 9px;
        font-size: 16px;
        color: #1f1e1d;
      }
      .my-badge {
        height: 16px;
        line-height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        color: #fff;
        background-color: #ff4040;
        margin-left: 8px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      cursor: pointer;
      span {
        margin-right: 8px;
        font-size: 12px;
        color: #565551;
      }
    }
  }
  .content-box {
    width: 100%;
    padding: 0 8px;
    margin: 0 auto;
    .content {
      width: 100%;
      height: 308px;
      border-radius: 6px;
      background-color: #fff;
      padding: 12px;
      .toptabs {
        width: 100%;
        padding-top: 2px;
        box-sizing: border-box;
        height: 26px;
        display: flex;
        align-items: flex-start;
        .tab {
          font-size: 14px;
          height: 22px;
          line-height: 22px;
          color: @textColor;
          position: relative;
          margin-right: 24px;
          cursor: pointer;
          &.active {
            color: @ntalkColor;
            &:after {
              content: '';
              position: absolute;
              top: 22px;
              left: 0;
              width: 100%;
              height: 2px;
              background-color: @ntalkColor;
            }
          }
        }
      }
      .result-empty {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        img {
          margin-top: 48px;
        }
        .empty-text {
          margin-top: 16px;
          line-height: 22px;
          font-size: 14px;
          color: #555;
        }
        .empty-link {
          margin-top: 16px;
        }
      }
      .result-list {
        width: 100%;
        height: calc(100% - 42px);
        margin-top: 16px;
        overflow-y: auto;
        .result-row {
          width: 100%;
          margin-bottom: 20px;
          .p_title {
            width: 100%;
            height: 22px;
            display: flex;
            align-items: center;
            .p_type {
              box-sizing: border-box;
              width: 40px;
              height: 100%;
              border: 1px solid;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              &.p_type_1 {
                background-color: #fffbe6;
                color: #faad14;
                border-color: #faad14;
              }
              &.p_type_2 {
                background-color: #e6f4ff;
                color: #1677ff;
                border-color: #1677ff;
              }
              &.p_type_3 {
                background-color: #e6fffb;
                color: #13c2c2;
                border-color: #13c2c2;
              }
            }
            span {
              width: calc(100% - 50px);
              margin-left: 8px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              line-height: 100%;
              font-size: 14px;
              color: @textColor;
            }
          }
          .p_content {
            width: 100%;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgba(0,0,0,0.66);
            font-size: 12px;
            margin-top: 4px;
          }
          .p_time {
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: rgba(0,0,0,0.66);
            font-size: 12px;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
